<template>
    <div id="essayPage">
        <TopBar :searchOrNot="false"></TopBar>
        <TypeWriter textContent="不必去寻找生活的意义，生活就是意义本身" textLength="19"></TypeWriter>
        <h3>- {{ new Date().getFullYear() }} -</h3>
        <essay-calendar :year="new Date().getFullYear()" :month="new Date().getMonth() + 1" :day="new Date().getDate()"
            class="calendarItem"></essay-calendar>
        <div v-for="(item, index) in allYear" :key="index">
            <h3>- {{ item }} -</h3>
            <essay-calendar :year="item" month="1" class="calendarItem"></essay-calendar>
        </div>
        <NotMore></NotMore>
        <FilingBar></FilingBar>
    </div>
</template>

<script>
import FilingBar from '@/components/reusable/FilingBar.vue';
import TypeWriter from '@/components/reusable/TypeWriter.vue';
import EssayCalendar from '@/components/EssayCalendar.vue';
import TopBar from '@/components/reusable/TopBar.vue'
import NotMore from '@/components/reusable/NotMore.vue';
export default {
    name: 'EssayPage',
    data() {
        return {
            allYear: [],
        }
    },
    components: {
        EssayCalendar, TopBar, NotMore, TypeWriter , FilingBar
    },
    methods: {
        // 获取所有随笔年份
        getAllYearData() {
            this.$axios({
                method: 'post',
                url: '/essay/getAllEssayYear'
            }).then(res => {
                let date = new Date()
                let index = res.data.indexOf(date.getFullYear())
                if (index != -1) { // 若存在，删除
                    res.data.splice(index, 1)
                }
                this.allYear = res.data
            })
        },
    },
    mounted() {
        this.getAllYearData()
    }
}
</script>

<style lang="scss" scoped>
h3 {
    font-size: $font-size-large;
    color: $color-main-text;
    text-align: center;
    margin: 20px auto;
}

.calendarItem {
    margin: 20px auto;
    width: 80%;
}

</style>